<ul class="maintabmenu multipletabmenu">
    <li class="current">
        <a href="">Thêm công trình</a>
    </li>    
</ul><!--maintabmenu-->

<div class="content">
    <?php if (!$hide) { ?>
        <?php if ($flag) { ?>
            <div class="notification msgsuccess">
                <a class="close"></a>
                <p>Thêm công trình thành công!</p>
            </div>
        <?php } else { ?>
            <div class="notification msgerror">
                <a class="close"></a>
                <p>Thêm công trình lỗi!</p>
            </div>
            <?php
        }
    }
    ?>
    <form action="" method="post" class="stdform" id="building-add" novalidate="novalidate">        
        <p>
            <label>Tên</label>
            <span class="field"><input type="text" class="mediuminput" id="name" name="name"></span>
        </p>

        <p>
            <label>Mô tả</label>    
            <textarea id="description" class="mediuminput" name="description" rows="5" cols="80"></textarea>
        </p>        

        <p>
            <label>Danh mục</label>
            <span class="field">
                <select id="category" name="category">
                    <option value="">Choose One</option>
                    <?php if (isset($categories)) { ?>
                        <?php foreach ($categories as $cat) { ?>
                            <option value="<?php echo $cat->category_id; ?>"><?php echo $cat->category_name; ?></option>
                            <?php
                        }
                    }
                    ?>
                </select>
            </span>
        </p>

        <br>
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <!-- The fileinput-button span is used to style the file input field as button -->                
                <span class="btn btn-success fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Thêm ảnh...</span>
                    <input id="fileupload" type="file" data-url="<?php echo base_url(); ?>upload" name="files[]" multiple>
                </span>
                <br>
                      
                <!-- The container for the uploaded files -->
                <div id="files" class="files"></div>
            </div>
        </div>
        <input type="hidden" id="images" name="images" value=""/>
        <p class="stdformbutton">
            <button class="submit radius2">Thêm</button>
        </p>
    </form>
</div>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery-ui-1.8.16.custom.min.js"></script> 
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/general.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>back-end/js/custom/form.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/jquery.wysiwyg.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.image.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.link.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/plugins/wysiwyg/wysiwyg.table.js" type="text/javascript"></script>
<script src="<?php echo base_url(); ?>back-end/js/vendor/jquery.ui.widget.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/load-image.min.js"></script>
<!-- The Canvas to Blob plugin is included for image resizing functionality -->
<script src="<?php echo base_url(); ?>back-end/js/canvas-to-blob.min.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.iframe-transport.js"></script>
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload.js"></script>
<!-- The File Upload processing plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-process.js"></script>
<!-- The File Upload image preview & resize plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-image.js"></script>
<!-- The File Upload validation plugin -->
<script src="<?php echo base_url(); ?>back-end/js/jquery.fileupload-validate.js"></script>

<script type="text/javascript">
    jQuery('#description').wysiwyg({
        controls: {
            cut: {visible: true },
            copy: { visible: true },
            paste: { visible: true }
        }
    });    
</script>
<script>

jQuery(function ($) {
    
    'use strict';
    // Change this to the location of your server-side upload handler:
    var url = '<?php echo base_url().'upload';?>',
        uploadButton = $('<button/>')
            .addClass('stdbtn btn_blue')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
                return false;
            });
    $('#fileupload').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000, // 5 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files');
        $.each(data.files, function (index, file) {
            //var node = $('<p/>').append($('<span/>').text(file.name));
            var node = $('<p/>').append($('<span/>').text(''));
            if (!index) {
                node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append(file.error);
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .bar').css(
            'width',
            progress + '%'
        );
    }).on('fileuploaddone', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var images = $('#images').val();
            images+=file.name+'||';
            $('#images').val(images);
            var link = $('<a>')
                .attr('target', '_blank')
                .prop('href', file.url);
            $(data.context.children()[index])
                .wrap(link);
        });
    }).on('fileuploadfail', function (e, data) {
        $.each(data.result.files, function (index, file) {
            var error = $('<span/>').text(file.error);
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>